<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<h2 mat-dialog-title data-qa="dialog-title">Create Connection</h2>
@if (breadcrumbs$ | async; as breadcrumbs) {
    <form class="create-connection-form" [formGroup]="createConnectionForm" data-qa="create-connection-form">
        <context-error-banner [context]="ErrorContextKey.CONNECTION"></context-error-banner>
        <mat-tab-group data-qa="connection-tabs">
            <mat-tab label="Details">
                <mat-dialog-content>
                    <div class="dialog-tab-content flex">
                        <div class="w-1/2 pr-2">
                            @switch (source.componentType) {
                                @case (ComponentType.Processor) {
                                    <source-processor
                                        [groupName]="getCurrentGroupName(breadcrumbs)"
                                        [processor]="source.entity"
                                        formControlName="relationships"></source-processor>
                                }
                                @case (ComponentType.ProcessGroup) {
                                    <source-process-group
                                        [outputPorts]="(childOutputPorts$ | async)!"
                                        [processGroup]="source.entity"
                                        formControlName="source"></source-process-group>
                                }
                                @case (ComponentType.RemoteProcessGroup) {
                                    <source-remote-process-group
                                        [remoteProcessGroup]="source.entity"
                                        formControlName="source"></source-remote-process-group>
                                }
                                @case (ComponentType.InputPort) {
                                    <source-input-port
                                        [groupName]="getCurrentGroupName(breadcrumbs)"
                                        [inputPortName]="source.entity.component.name"></source-input-port>
                                }
                                @case (ComponentType.Funnel) {
                                    <source-funnel [groupName]="getCurrentGroupName(breadcrumbs)"></source-funnel>
                                }
                            }
                        </div>
                        <div class="w-1/2 pl-2">
                            @switch (destination.componentType) {
                                @case (ComponentType.Processor) {
                                    <destination-processor
                                        [groupName]="getCurrentGroupName(breadcrumbs)"
                                        [processor]="destination.entity"></destination-processor>
                                }
                                @case (ComponentType.ProcessGroup) {
                                    <destination-process-group
                                        [inputPorts]="(childInputPorts$ | async)!"
                                        [processGroup]="destination.entity"
                                        formControlName="destination"></destination-process-group>
                                }
                                @case (ComponentType.RemoteProcessGroup) {
                                    <destination-remote-process-group
                                        [remoteProcessGroup]="destination.entity"
                                        formControlName="destination"></destination-remote-process-group>
                                }
                                @case (ComponentType.OutputPort) {
                                    <destination-output-port
                                        [groupName]="getCurrentGroupName(breadcrumbs)"
                                        [outputPortName]="destination.entity.component.name"></destination-output-port>
                                }
                                @case (ComponentType.Funnel) {
                                    <destination-funnel
                                        [groupName]="getCurrentGroupName(breadcrumbs)"></destination-funnel>
                                }
                            }
                        </div>
                    </div>
                </mat-dialog-content>
            </mat-tab>
            <mat-tab label="Settings">
                <mat-dialog-content>
                    <div class="dialog-tab-content flex gap-x-4">
                        <div class="w-full">
                            <div>
                                <mat-form-field>
                                    <mat-label>Name</mat-label>
                                    <input matInput formControlName="name" type="text" />
                                </mat-form-field>
                            </div>
                            <div class="flex flex-col mb-5">
                                <div>Id</div>
                                <div class="unset neutral-color">No value set</div>
                            </div>
                            <div>
                                <mat-form-field>
                                    <mat-label>
                                        FlowFile Expiration
                                        <i
                                            class="fa fa-info-circle"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            tooltipInputData="The maximum amount of time an object may be in the flow before it will be automatically aged out of the flow."></i>
                                    </mat-label>
                                    <input matInput formControlName="flowFileExpiration" type="text" />
                                </mat-form-field>
                            </div>
                            <div class="flex gap-x-2">
                                <div class="w-full">
                                    <mat-form-field>
                                        <mat-label>
                                            Back Pressure Object Threshold
                                            <i
                                                class="fa fa-info-circle"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="The maximum number of objects that can be queued before back pressure is applied. Must be a non-negative integer."></i>
                                        </mat-label>
                                        <input
                                            matInput
                                            formControlName="backPressureObjectThreshold"
                                            type="number"
                                            min="0" />
                                    </mat-form-field>
                                </div>
                                <div class="w-full">
                                    <mat-form-field>
                                        <mat-label>
                                            Size Threshold
                                            <i
                                                class="fa fa-info-circle"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="The maximum data size of objects that can be queued before back pressure is applied."></i>
                                        </mat-label>
                                        <input matInput formControlName="backPressureDataSizeThreshold" type="text" />
                                    </mat-form-field>
                                </div>
                            </div>
                            <div class="flex gap-x-2">
                                <div class="w-full">
                                    <mat-form-field>
                                        <mat-label>
                                            Load Balance Strategy
                                            <i
                                                class="fa fa-info-circle"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="How to load balance the data in this Connection across the nodes in the cluster."></i>
                                        </mat-label>
                                        <mat-select
                                            formControlName="loadBalanceStrategy"
                                            (selectionChange)="loadBalanceChanged($event.value)">
                                            @for (option of loadBalanceStrategies; track option) {
                                                <mat-option
                                                    [value]="option.value"
                                                    nifiTooltip
                                                    [tooltipComponentType]="TextTip"
                                                    [tooltipInputData]="option.description"
                                                    [delayClose]="false">
                                                    {{ option.text }}
                                                </mat-option>
                                            }
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                                @if (loadBalancePartitionAttributeRequired) {
                                    <div class="w-full">
                                        <mat-form-field>
                                            <mat-label>
                                                Attribute Name
                                                <i
                                                    class="fa fa-info-circle"
                                                    nifiTooltip
                                                    [tooltipComponentType]="TextTip"
                                                    tooltipInputData="The FlowFile Attribute to use for determining which node a FlowFile will go to."></i>
                                            </mat-label>
                                            <input matInput formControlName="partitionAttribute" type="text" />
                                        </mat-form-field>
                                    </div>
                                }
                            </div>
                            @if (loadBalanceCompressionRequired) {
                                <div>
                                    <mat-form-field>
                                        <mat-label>
                                            Load Balance Compression
                                            <i
                                                class="fa fa-info-circle"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="Whether or not data should be compressed when being transferred between nodes in the cluster."></i>
                                        </mat-label>
                                        <mat-select formControlName="compression">
                                            @for (option of loadBalanceCompressionStrategies; track option) {
                                                <mat-option
                                                    [value]="option.value"
                                                    nifiTooltip
                                                    [tooltipComponentType]="TextTip"
                                                    [tooltipInputData]="option.description"
                                                    [delayClose]="false">
                                                    {{ option.text }}
                                                </mat-option>
                                            }
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            }
                        </div>
                        <div class="w-full">
                            <prioritizers
                                [allPrioritizers]="(availablePrioritizers$ | async)!"
                                formControlName="prioritizers"></prioritizers>
                        </div>
                    </div>
                </mat-dialog-content>
            </mat-tab>
        </mat-tab-group>
        @if ({ value: (saving$ | async)! }; as saving) {
            <mat-dialog-actions align="end" data-qa="dialog-actions">
                <button mat-button mat-dialog-close data-qa="cancel-button">Cancel</button>
                <button
                    [disabled]="createConnectionForm.invalid || saving.value || createConnectionForm.pending"
                    type="button"
                    (click)="createConnection(breadcrumbs.id)"
                    mat-flat-button
                    data-qa="add-button">
                    <span *nifiSpinner="saving.value">Add</span>
                </button>
            </mat-dialog-actions>
        }
    </form>
}
